<template>
  <div class="case-editor">
    <div class="toolbar">
      <el-button-group>
        <el-button type="primary" @click="saveCase">保存</el-button>
        <el-button @click="previewCode">预览代码</el-button>
      </el-button-group>
    </div>
    
    <el-container>
      <el-aside width="200px">
        <div class="components-panel">
          <draggable 
            :list="availableSteps"
            :group="{ name: 'steps', pull: 'clone', put: false }"
            item-key="type"
          >
            <template #item="{ element }">
              <div class="step-item">
                {{ element.label }}
              </div>
            </template>
          </draggable>
        </div>
      </el-aside>
      
      <el-main>
        <div class="canvas">
          <draggable 
            v-model="currentCase.steps"
            group="steps"
            item-key="id"
            class="steps-container"
          >
            <template #item="{ element }">
              <div class="step-block">
                <el-form :model="element" label-width="80px">
                  <el-form-item label="操作">
                    {{ element.type }}
                  </el-form-item>
                  <el-form-item label="目标">
                    <el-input v-model="element.target" />
                  </el-form-item>
                  <el-form-item label="值" v-if="element.type === 'input'">
                    <el-input v-model="element.value" />
                  </el-form-item>
                </el-form>
              </div>
            </template>
          </draggable>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import draggable from 'vuedraggable'
import type { TestCase, TestStep } from '../types'

const availableSteps = [
  { type: 'click', label: '点击' },
  { type: 'input', label: '输入' },
  { type: 'assert', label: '断言' },
  { type: 'wait', label: '等待' }
]

const currentCase = ref<TestCase>({
  id: '',
  name: '',
  description: '',
  steps: [],
  tags: [],
  priority: 1,
  creator: '',
  createTime: '',
  updateTime: ''
})

const saveCase = async () => {
  // TODO: 保存用例到后端
}

const previewCode = () => {
  // TODO: 生成 Python 代码预览
}
</script>

<style scoped lang="scss">
.case-editor {
  height: 100%;
  
  .toolbar {
    padding: 8px;
    border-bottom: 1px solid #ddd;
  }
  
  .components-panel {
    padding: 16px;
    border-right: 1px solid #ddd;
    
    .step-item {
      padding: 8px;
      margin: 4px 0;
      border: 1px solid #ddd;
      cursor: move;
      
      &:hover {
        background: #f5f7fa;
      }
    }
  }
  
  .canvas {
    min-height: 400px;
    padding: 16px;
    
    .step-block {
      padding: 16px;
      margin: 8px 0;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
  }
}
</style> 